<template>
    <div class="login f-c-c" @keyup.enter="loginHandle">
        <div class="wrapper">
            <el-form>
                <el-form-item label="用 户 名">
                    <el-input placeholder="请输入登录用户名" v-model="formData.username"></el-input>
                </el-form-item>
                <el-form-item label="密 码" >
                    <el-input placeholder="请输入登录密码" type='password' v-model="formData.password"></el-input>
                </el-form-item>
                <el-form-item label="验 证 码" >
                    <div class="f-s">
                        <el-input placeholder="验证码"  v-model="formData.code"></el-input>
                        <img :src="loginCodeSrc" alt="验证码" class="login-code" @click='getCode'>
                    </div>
                </el-form-item>
            </el-form>
            <div class="center">
                <el-button type="primary" @click='loginHandle'>立 即 登 录</el-button>
            </div>
        </div>
    </div>
</template>

<script>
    import {toast} from '@u'
    export default {
        data () {
            return {
                loginCodeSrc : null,
				formData : {
					username : process.env.NODE_ENV == 'production' ? null : 'object',
					password : process.env.NODE_ENV == 'production' ? null : '123456',
					code : null
				}
            }
        },
        created () {
            this.getCode()
        },
        methods : {
            getCode () {
                this.__api.system.getLoginCode().then(res => {
                    this.loginCodeSrc = res.code_base64
                })
            },
            loginHandle () {
                if (!this.formData.username || !this.formData.password || !this.formData.code) {
                    toast('请填写用户名/密码/验证码', 'error')
                    return;
                }
                this.__api.system.login(this.formData).then(res => {
                    localStorage.setItem('authorization', res.authorization);
					this.$router.replace('/');
                })
            }
        } 
    }
</script>

<style lang='less'>
    .login {
        width: 100vw;
        height: 100vh;
        display: flex;
        // flex-direction: column;
        justify-content: center;
        align-items: center;
        background: #000;
        background-image: radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
                       radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px),
                       radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px),
                       radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 40px) ;
        background-size: 550px 550px, 350px 350px, 250px 250px, 150px,150px;
        background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
        .wrapper {
            width: 400px;
            padding: 30px;
            background: rgba(255,255,255,.2);
            border-radius: 10px;
            .el-form-item__label {
                color: #fff;
            }
            .login-code {
				width: 100px;
				margin-left: 10px;
				border-radius: 4px;
				background: #fff;
				cursor: pointer;
			}
        }
    }
</style>